<template>
	<div class="appointment-container">
		<div class="form-header">
			<h1>预约挂号</h1>
		</div>

		<el-form class="appointment-form">
			<el-form-item label="选择医院" prop="hospitalId" class="form-item-custom">
				<div class="form-item-header">
					<span class="required-mark">*</span>
				</div>
				<el-select v-model="form.hospitalId" placeholder="请选择医院" style="width: 100%" @focus="getHospital"
					v-loading="isHospitalOk" class="custom-select">
					<el-option v-for="item in hospitalList" :key="item.id" :label="item.hospitalName" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="选择科室" prop="deptId" class="form-item-custom">
				<div class="form-item-header">
					<span class="required-mark">*</span>
				</div>
				<el-select v-model="form.deptId" placeholder="请选择科室" style="width: 100%" @focus="getDept"
					v-loading="isDeptOk" class="custom-select">
					<el-option v-for="item in deptList" :key="item.deptCode" :label="item.deptName"
						:value="item.deptCode">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="选择医生" prop="doctorId" class="form-item-custom" v-if="form.hospitalId && form.deptId">
				<div class="form-item-header">
					<span class="required-mark">*</span>
				</div>
				<el-select v-model="form.doctorId" placeholder="请选择医生" style="width: 100%" @focus="getDoctor"
					v-loading="isDoctorOk" class="custom-select">
					<el-option v-for="item in doctorList" :key="item.userId" :label="item.realName" :value="item.userId">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="患者主诉" prop="chiefComplaint" class="form-item-custom">
				<div class="form-item-header">
					<span class="optional-mark">*</span>
				</div>
				<el-input v-model="form.chiefComplaint" placeholder="请详细描述您的症状、不适感受及持续时间" type="textarea" :rows="4"
					class="complaint-textarea"></el-input>
				<div class="complaint-tip">请详细描述您的症状，这将帮助医生更好地了解您的情况</div>
			</el-form-item>

			<el-form-item class="submit-container">
				<el-button type="primary" @click="onSubmit" :loading="creating" class="submit-btn">提交挂号</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import http from '../../utils/request'

	export default {
		data() {
			return {
				hospitalList: [],
				deptList: [],
				doctorList: [],
				isHospitalOk: false,
				isDeptOk: false,
				isDoctorOk: false,
				creating: false, // 添加提交加载状态
				form: {
					hospitalId: '', //选择的医院的ID
					deptId: '', //选择的科室的ID
					doctorId: '', //选择的医生的ID
					chiefComplaint: '', //患者主诉
				}
			}
		},
		watch: {
			// 当医院或科室变化时清空医生列表
			'form.hospitalId': function(newVal, oldVal) {
				if (newVal !== oldVal) {
					this.doctorList = [];
					this.form.doctorId = '';
				}
			},
			'form.deptId': function(newVal, oldVal) {
				if (newVal !== oldVal) {
					this.doctorList = [];
					this.form.doctorId = '';
				}
			},
		},
		methods: {
			async getHospital() {
				if (this.hospitalList.length > 0) return; // 已加载过不再加载
				
				this.isHospitalOk = true;
				try {
					const resp = await http.get('/patient/getHospitalList');
					this.hospitalList = resp.data.data || [];
				} catch (error) {
					console.error('获取医院列表失败:', error);
					this.$message.error('获取医院列表失败');
				} finally {
					setTimeout(() => {
						this.isHospitalOk = false;
					}, 500);
				}
			},
			
			async getDept() {
				if (this.deptList.length > 0) return; // 已加载过不再加载
				
				this.isDeptOk = true;
				try {
					const resp = await http.get('/patient/getDeptList');
					this.deptList = resp.data.data || [];
				} catch (error) {
					console.error('获取科室列表失败:', error);
					this.$message.error('获取科室列表失败');
				} finally {
					setTimeout(() => {
						this.isDeptOk = false;
					}, 500);
				}
			},
			
			async getDoctor() {
				
				if (this.form.hospitalId === '' || this.form.deptId === '') {
					this.$message.error("请先选择医院和科室")
					return;
				}
				
				if (this.doctorList.length > 0) return; // 已加载过不再加载
				
				this.isDoctorOk = true;
				try {
					const resp = await http.get(`/patient/getDoctorList`, {
						params: {
							deptId: this.form.deptId,
							hospitalId: this.form.hospitalId
						}
					});
					this.doctorList = resp.data.data || [];
				} catch (error) {
					console.error('获取医生列表失败:', error);
					this.$message.error('获取医生列表失败');
				} finally {
					setTimeout(() => {
						this.isDoctorOk = false;
					}, 500);
				}
			},
			
			async onSubmit() {
				// 验证必填项
				if (this.form.hospitalId === '' || this.form.deptId  === '' || this.form.doctorId === '') {
					this.$message.error("请先选择您的就诊信息");
					return;
				}
				
				// 主诉为空时提示
				if (!this.form.chiefComplaint.trim()) {
					const confirm = await this.$confirm(
						'注意：当前您的主诉信息为空,请填写！？',
						'提示',
						{
							confirmButtonText: '返回填写',
							cancelButtonText: '取消',
							type: 'warning'
						}
					).catch(() => false);
					
					if (!confirm) return;
				}
				
				this.creating = true;
				try {
					console.error("form",this.form);
					const resp = await http.post('/patient/appointment', {
						creator_id: this.$store.state.id,
						hospitalId: this.form.hospitalId,
						deptCode: this.form.deptId,
						attendingDoctorId: this.form.doctorId,
						chiefComplaint: this.form.chiefComplaint.trim(),
					});
					
					if (resp.data.code === 1) {
						this.$message.success('预约成功！');
						// 重置表单
						this.resetForm();
					} else {
						this.$message.error(resp.data.msg || '预约失败');
					}
				} catch (error) {
					console.error('提交预约失败:', error);
					this.$message.error('提交预约失败，请稍后重试');
				} finally {
					this.creating = false;
				}
			},
			
			resetForm() {
				this.form = {
					hospitalId: '',
					deptId: '',
					doctorId: '',
					chiefComplaint: '',
				};
				this.doctorList = [];
			}
		}
	}
</script>

<style scoped>
	/* 保持原有的样式不变 */
	.appointment-container {
		max-width: 700px;
		margin: 0 auto;
		padding: 30px;
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
		font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
	}

	.form-header {
		text-align: center;
		margin-bottom: 30px;
	}

	.form-header h1 {
		color: #1a73e8;
		font-size: 24px;
		font-weight: 600;
		margin-bottom: 8px;
	}

	.appointment-form {
		padding: 0 10px;
	}

	.form-item-custom {
		margin-bottom: 24px;
	}

	.form-item-header {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}

	.required-mark {
		color: #d93025;
		margin-left: 4px;
		font-size: 16px;
	}

	.optional-mark {
		color: #5f6368;
		margin-left: 4px;
		font-size: 13px;
	}

	.complaint-tip {
		font-size: 13px;
		color: #5f6368;
		margin-top: 6px;
	}

	.submit-container {
		margin-top: 30px;
		text-align: center;
	}

	.submit-btn {
		width: 100%;
		height: 48px;
		border-radius: 8px;
		background: linear-gradient(135deg, #1a73e8, #4285f4);
		border: none;
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 1px;
		transition: all 0.3s;
		box-shadow: 0 2px 6px rgba(26, 115, 232, 0.3);
	}

	.submit-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(26, 115, 232, 0.4);
	}

	.submit-btn:active {
		transform: translateY(0);
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
		.appointment-container {
			padding: 20px 15px;
			margin: 10px;
		}

		.form-header h1 {
			font-size: 20px;
		}
	}
</style>